<template>
  <div class="bigBox">
    <!-- 搜索 -->
    <div class="search">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="点位搜索">
          <el-input v-model="ptValue" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="区域搜索">
          <el-select v-model="xzValue" placeholder="请选择">
            <el-option v-for="item in zoneValue" :key="item.id" :label="item.name" :value="item.id" />

          </el-select></el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 主题内容 -->
    <el-card>
      <!-- 新增角色按钮 -->
      <el-row style="height: 60px">
        <el-button
          icon="el-icon-plus"
          size="small"
          type="primary"
          @click="add"
        >新增</el-button>
      </el-row>
      <!-- 表格 -->
      <el-table :data="roleList">
        <el-table-column
          label="序号"
          align="left"
          type="index"
          width="100"
        />
        <el-table-column
          label="点位名称"
          align="left"
          width="270"
          prop="name"
        />
        <el-table-column
          label="所在区域"
          align="left"
          width="270"
          prop="region.name"
        />
        <el-table-column
          label="商圈类型"
          align="left"
          width="260"
          prop="businessType.name"
        />
        <el-table-column
          label="合作商"
          align="left"
          width="260"
          prop="ownerName"
        />
        <el-table-column
          label="详细地址"
          align="left"
          width="350"
          prop="addr"
        />
        <el-table-column label="操作" width="175" align="left">
          <template #default="{ row }">
            <!-- <template class="three"> -->
            <a style="color:blue" @click="viewDetails(row)">查看详情</a>
            <a style="margin-left:18px;color:blue" @click="add(row)">修改</a>
            <a style="margin-left:18px;color:red" @click="del(row.id)">删除</a>
          </template>
        </el-table-column>
      </el-table>
      <el-row class="bottom">
        <el-col :span="20">
          <div>共{{ areaList.totalCount }}条数据 第{{ areaList.pageIndex }}/{{ areaList.totalPage }}页</div>
        </el-col>
        <el-col :span="4">
          <el-button-group>
            <el-button type="warning" icon="el-icon-arrow-left" :disabled="upShow" @click="up">上一页</el-button>
            <el-button type="warning" style="margin-left:20px;" :disabled="underShow" @click="under">下一页<i class="el-icon-arrow-right el-icon--right" /></el-button>
          </el-button-group>
        </el-col>
      </el-row>
    </el-card>
    <!-- add新增的弹出框 -->
    <el-dialog
      title="新增区域"
      :visible.sync="addShow"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="点位名称" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="所在区域" prop="regionId">
          <el-select v-model="ruleForm.regionId" placeholder="请选择" style="width:100%">
            <el-option v-for="item in zoneValue" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属商圈" prop="businessId">
          <el-select v-model="ruleForm.businessId" placeholder="请选择" style="width:100%">
            <el-option v-for="item in businessList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="归属合作商" prop="ownerId">
          <el-select v-model="ruleForm.ownerId" placeholder="请选择" style="width:100%">
            <el-option v-for="item in partnersList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址" prop="areaCode">
          <div class="block">
            <el-cascader
              v-model="ruleForm.areaCode"
              :props="{ checkStrictly: true }"
              props-check-strictly="true"
              placeholder="请选择"
              style="width:100%"
              :options="options"
              @change="handleChange"
            />
          </div>
        </el-form-item>
        <el-form-item prop="addr">
          <el-input v-model="ruleForm.addr" type="textarea" placeholder="请输入详细地址" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addShow = false">取 消</el-button>
        <el-button type="primary" @click="addSure">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="点位详情"
      :visible.sync="detailsShow"
      width="40%"
      :before-close="detailsShowFn"
    >

      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="序号"
          width="180"
        />
        <el-table-column
          prop="innerCode"
          label="机器编号"
          width="180"
        />
        <el-table-column
          prop="vmStatus"
          label="设备状态"
          width="180"
        >
          <template #default="{ row }">
            {{ condition[row.vmStatus] }}
          </template>
        </el-table-column>
        <el-table-column
          prop="lastSupplyTime"
          label="最后一次供货时间"
          width="180"
        />
      </el-table>
    </el-dialog>
  </div>

</template>

<script>
// import cityData from '@/components/chengShi/index.js'
// import { domestic } from '@/components/city/index.js'
import { regionData, CodeToText } from 'element-china-area-data'
import { deletePT, modifyPT, addPT, Partners, circlesList, areaList, pointSearch, pointDetails } from '@/api'
export default {
  data() {
    return {
      options: regionData, // 城市数据
      row: {}, // 判断哪个点击的
      xiangXi: {},
      tableData: [], // 详细
      detailsShow: false, // 区域详情的关闭
      // 新增输入框的数据
      ruleForm: {
        name: '', // 点位名称
        regionId: '', // 所属区域Id
        businessId: '', //	所属商圈Id
        ownerId: '', // 合作商Id
        addr: '', // 详细地址
        areaCode: '', // 最后一级区域Id
        createUserId: 1, //	创建人Id
        ownerName: ''// 合作商名称
      },
      rules: {
        name: {
          required: true,
          message: '区域名称不能为空',
          trigger: 'blur'
        },
        regionId: {
          required: true,
          message: '所在区域不能为空',
          trigger: 'blur'
        },
        businessId: {
          required: true,
          message: '所属商区不能为空',
          trigger: 'blur'
        },
        ownerId: {
          required: true,
          message: '归属合作商不能为空',
          trigger: 'blur'
        },
        areaCode: {
          required: true,
          message: '详细地址不能为空',
          trigger: 'blur'
        },
        desc: [
          { required: true, message: '详细地址不能为空', trigger: 'blur' },
          { min: 1, max: 60, message: '输入字数不能超过60', trigger: 'change' }
        ]
      },
      loc: '',
      partnersList: [], // 合作商列表
      businessList: [], // 商圈
      addShow: false, // 控制添加窗口
      upShow: false, // 上下页的禁用状态
      underShow: false,
      ptValue: '', // 绑定输入框 点位搜索
      zoneValue: [], // 区域搜索
      xzValue: '', // 选择的value
      roleList: [], // 渲染数据
      areaList: {}, // 全部数据
      condition: {
        0: '未投放', 1: '运营', 3: '撤机'
      }
    }
  },
  async created() {
    // this.options = cityData.cityData
    console.log(this.option)
    this.publicApi()
    const res = await areaList({ pageIndex: 1, pageSize: 100000 })
    console.log(res)
    this.zoneValue = res.data.currentPageRecords
  },
  methods: {
    handleChange(value) {
      // 多级选择
      var loc = ''
      for (let i = 0; i < this.ruleForm.areaCode.length; i++) {
        loc += CodeToText[this.ruleForm.areaCode[i]] + '-'
      }
      this.loc = loc
    },
    del(id) {
      // 删除
      this.$confirm('真的要删除吗?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        console.log(this.areaList)
        // 2. 调用接口
        await deletePT(id)
        // 提示用户
        this.$message.success('删除成功')
        // 删除最后一页最后一条数据时，页数减 1
        if (this.areaList.currentPageRecords.length === 1 && this.areaList.pageIndex > 1) {
          this.areaList.pageIndex--
        }
        this.publicApi()
      }).catch(error => {
        console.log(error)
      })
    },
    detailsShowFn() {
      // 产看详情的关闭方法
      this.detailsShow = false
    },
    // 查看详情
    async viewDetails(val) {
      this.detailsShow = true
      console.log(val)
      this.xiangXi = val
      const { data } = await pointDetails(val.id)
      this.tableData = data
      console.log(this.tableData)
    },
    async addSure() {
      // 新增的确认提交
      this.$refs.ruleForm.validate(async(valid) => {
        if (!valid) return
        if (this.row.name) {
          await modifyPT(this.row.id, this.ruleForm)
          // await modifyArea(this.row.id, this.ruleForm)
          this.$message.success('修改成功')
          this.publicApi()
          this.handleClose()
        } else {
          console.log(this.ruleForm.areaCode[2])
          this.ruleForm.addr = this.loc + this.ruleForm.addr
          this.ruleForm.areaCode = this.ruleForm.areaCode[this.ruleForm.areaCode.length - 1]
          this.partnersList.forEach(item => {
            if (item.id === this.ruleForm.ownerId) {
              this.ruleForm.ownerName = item.name
            }
          })
          console.log(this.ruleForm)
          await addPT(this.ruleForm)
          // this.publicApi()
          this.handleClose()
          this.$message.success('添加成功')
        }
      })
    },
    handleClose() {
      // 添加窗口的关闭方法
      this.addShow = false
      this.$refs.ruleForm.resetFields()
    },
    // 搜索部分
    onSubmit() {
      // 查询的按钮areaName
      this.publicApi(this.ptValue, '', '', this.xzValue)
    },
    // 新增的按钮
    async add(row) {
      console.log(row)
      this.row = row
      this.addShow = true
      // 获取商圈的四个数据
      const { data } = await circlesList()
      const res = await Partners({ pageIndex: 1, pageSize: 10000 })
      this.partnersList = res.data.currentPageRecords
      console.log(this.partnersList)
      this.businessList = data
      console.log(data)
      if (row.name) {
        this.ruleForm.name = row.name
        this.ruleForm.regionId = row.region.id
        this.ruleForm.businessId = row.businessId
        this.ruleForm.ownerId = row.ownerId
        this.ruleForm.areaCode = row.areaCode
        const arr = row.addr.split('-')
        this.ruleForm.addr = arr[arr.length - 1]
      }
    },
    // 公共调用
    async publicApi(name, pageIndex, pageSize, regionId) {
      const { data } = await pointSearch({
        name: name,
        pageIndex: pageIndex,
        pageSize: pageSize,
        regionId: regionId
      })
      this.areaList = data
      if (data.pageIndex <= 1) {
        this.upShow = true
      } else {
        this.upShow = false
      }
      if (data.pageIndex === data.totalPage) {
        this.underShow = true
      } else {
        this.underShow = false
      }
      this.roleList = data.currentPageRecords
    },
    up() {
      // 上一页
      this.publicApi('', +this.areaList.pageIndex - 1, this.areaList.pageSize)
    },
    under() {
      // 下一页
      this.publicApi('', +this.areaList.pageIndex + 1, this.areaList.pageSize)
    }
  }
}
</script>
<style lang="scss" scoped>
.bigBox {
  padding: 20px;
  .search {
    background-color: #fff;
    padding: 10px;
    padding-bottom: 0px;
  }
}
.bottom {
  margin-top: 30px;
}
</style>
